<template>
  <div>
    <van-nav-bar class="top" fixed placeholder title="网易严选">
      <template #left>
        <van-icon
          style="margin-left: 50px"
          color="#666"
          name="wap-home-o"
          size="20"
          @click="goto('/home')"
        />
      </template>
      <template #right>
        <van-icon
          style="margin-right: 10px"
          color="#666"
          name="search"
          size="20"
          @click="goto('/search')"
        />
        <van-icon
          style="margin-right: 50px"
          color="#666"
          name="shopping-cart-o"
          size="20"
          @click="goto('/cart')"
        />
      </template>
    </van-nav-bar>
    <div class="top1">
      <div class="tupian"><img :src="data.goods_big_logo" alt="" /></div>
      <div class="yi">
        <div class="day">
          <span>每日抄底</span>
          <span>|</span>
          <span>距结束1天2个小时</span>
          <span>仅剩{{ data.goods_number }}件</span>
        </div>
        <div class="jiage">
          <span>￥{{ data.goods_price }}</span>
        </div>
      </div>

      <div class="title">
        <div class="pro">
          <img src="../assets/home/pro.png" alt="" />
          <p>Pro会员叠加优惠，再省<span class="jia">￥19</span></p>
          <span class="kai">开通</span>
        </div>
        <h1 class="rong">{{ data.goods_name }}</h1>
        <div class="tuijian">推荐理由</div>
        <ul class="liyou">
          <li>防水系数5000，透湿系数3000</li>
          <li>可拆卸，外皮接缝处全压胶处理，透气且防风防雨</li>
          <li>YKK拉链经久耐用，品质保证</li>
        </ul>
      </div>
      <div class="comment">
        <div class="tit">
          <h1>用户评价<span>(447条)</span></h1>
          <van-icon name="arrow" size="16px" />
        </div>
        <div class="ping">
          <van-image
            round
            width="35px"
            height="35px"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <span>用户808</span>
        </div>
        <p class="content van-multi-ellipsis--l2">
          要不考虑给点模特费我吧……自从穿去西藏旅行，已经无数个人找我要链接了。衣服款式很好，配工装裤马丁靴，就是如图效果，非常非常喜欢，拍照太好看了！！！
        </p>
        <div class="tu">
          <img src="../assets/home/tu1.png" alt="" />
          <img src="../assets/home/tu1.png" alt="" />
          <img src="../assets/home/tu1.png" alt="" />
          <img src="../assets/home/tu1.png" alt="" />
        </div>
      </div>
      <h2 style="font-size: 18px; font-weight: 400">————商品详情————</h2>
      <div class="xiangqing" v-html="data.goods_introduce"></div>

      <div class="good">
        <h2>——你可能还喜欢——</h2>
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell>
            <van-row type="flex">
              <van-col
                span="12"
                style="text-align: center; margin-bottom: 18px"
                v-for="item in list"
                :key="item.goods_id"
                @click="goto('/goods/' + item.goods_id)"
                ><van-image
                  width="165"
                  height="165"
                  :src="item.goods_small_logo"
                />
                <div class="title van-multi-ellipsis--l2">
                  {{ item.goods_name }}
                </div>
                <div class="price">
                  <span class="new">{{ item.goods_price }}</span>
                  <del class="old">75</del>
                </div>
                <div class="manjian">满99减30元</div>
              </van-col>
            </van-row>
          </van-cell>
        </van-list>
      </div>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-goods-action-icon
          icon="cart-o"
          text="购物车"
          :badge="length"
          @click="goto('/cart')"
        />
        <van-goods-action-button
          type="warning"
          text="加入购物车"
          @click="addcart"
        />
        <van-goods-action-button type="danger" text="立即购买" />
      </van-goods-action>
      <div class="gotop" @click="gotop">
        <img src="../assets/home/gotop.png" alt="" />
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Goods",
  data() {
    return {
      current: 0,
      list: [],
      loading: false,
      finished: false,
      data: {},
      page: 1,
      res: "",
    };
  },
  watch: {
    "$route.params.id": function (nid, oid) {
      this.getData(nid);
    },
  },
  async created() {
    this.$parent.showTabbar = false;
    const { id } = this.$route.params;
    this.getData(id);
    const res = await this.cartlength(this.userinfo);
    this.res = res;
  },
  destroyed() {
    this.$parent.showTabbar = true;
  },
  computed: {
    ...mapState("user", ["userinfo", "length"]),
    ...mapState("cart", ["cartlist"]),
    ...mapGetters("user", ["islog"]),
  },
  methods: {
    goto(url) {
      (this.list = []),
        (this.loading = false),
        (this.finished = false),
        (this.data = {}),
        (this.page = 1),
        this.$router.push(url);
    },
    async onLoad() {
      if (this.data.cat_one_id) {
        this.loading = true;
        const {
          data: { data },
        } = await this.$request.get("/api/goods", {
          params: {
            page: this.page,
            // pagesize: 10,
            cat_one_id: this.data.cat_one_id,
          },
        });
        this.list.push(...data.list);
        this.loading = false;
        if (this.list.length >= data.total) {
          this.finished = true;
        }
        this.page++;
      }
    },
    ...mapActions("user", ["cartlength"]),
    async addcart() {
      if (!this.islog) {
        this.$router.push("/login");
        return;
      }
      const { data } = await this.$request.post("/api/cart/0", {
        user_id: this.userinfo.user_id,
        goods_id: this.data.goods_id,
        goods_num: 1,
      });
      if (data.code === -1) {
        this.$toast("用户登录已过期，请重新登录");
        this.$router.push("/login");
        return;
      }
      this.cartlength(this.userinfo);
    },
    async getData(id) {
      const { data } = await this.$request.get("/api/goods/" + id);
      this.data = data.data[0];
      this.onLoad();
    },

    gotop() {
      scrollTo({ top: 0, behavior: "smooth" });
    },
  },
};
</script>
<style lang="scss" scoped>
.top1 {
  padding-bottom: 60px;
  position: relative;
  .tupian {
    width: 100%;
    height: 414px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .custom-indicator {
    position: absolute;
    right: 5px;
    bottom: 5px;
    padding: 2px 5px;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.1);
  }
  .yi {
    background-color: rgb(250, 30, 50);
    .day {
      text-align: left;
      padding-left: 16px;
      padding-top: 8px;
      span {
        font-size: 13px;
        color: #fff;
        margin-right: 3px;
      }
    }
    .jiage {
      text-align: left;
      padding-left: 16px;
      span {
        font-size: 35px;
        color: #fff;
      }
      del {
        font-size: 15px;
        color: #fff;
      }
    }
  }
  .title {
    padding-left: 14px;
    .pro {
      width: 95%;
      height: 44px;
      display: flex;
      align-items: center;
      background: #fff1d2;
      margin: 14px 0 0 5px;
      img {
        width: 23px;
        height: 14px;
        padding-left: 20px;
      }
      p {
        margin-left: 5px;
        .jia {
          color: #dd1a21;
          font-weight: 700;
          font-size: 15px;
        }
      }
      .kai {
        margin-left: 57px;
        width: 52px;
        height: 26px;
        background: #12161c;
        color: #f3ca84;
        border-radius: 13px;
        line-height: 26px;
      }
    }
    .rong {
      color: #333;
      font-size: 17px;
      margin-right: 14px;
    }
    .tuijian {
      color: #333;
      font-size: 13px;
      text-align: left;
      margin-bottom: 10px;
    }
    .liyou {
      background: #fafafa;
      border: 1px solid #e6e6e6;
      padding: 7px 11px;
      li {
        font-size: 13px;
        text-align: left;
        padding: 3px;
      }
    }
  }
  .comment {
    padding: 15px 14px 0 14px;
    .tit {
      display: flex;
      justify-content: space-between;
      align-items: center;
      h1 {
        font-size: 16px;
        font-weight: 400;
      }
    }
    .ping {
      text-align: left;
      display: flex;
      align-items: center;
      .van-image {
        margin-right: 15px;
      }
    }
    .content {
      text-align: left;
    }
    .tu {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      img {
        width: 80px;
        height: 80px;
        margin-right: 5px;
      }
    }
  }
  .good {
    h2 {
      font-size: 17px;
      font-weight: 400;
      padding: 30px 0;
    }
    .title {
      width: 191px;
      font-size: 16px;
      padding-left: 5px;
      box-sizing: border-box;
    }
    .price {
      width: 150px;
      padding-left: 7px;
      margin-top: 6px;
      margin-bottom: 6px;
      text-align: left;
      box-sizing: border-box;
      .new::before {
        content: "￥";
        color: red;
        font-size: 13px;
      }
      .new {
        font-size: 22px;
        color: rgb(250, 30, 50);
        font-weight: 600;
      }
      .old::before {
        content: "￥";
        font-size: 13px;
        color: rgb(153, 153, 153);
      }
      .old {
        color: rgb(153, 153, 153);
      }
    }
    .manjian {
      width: 70px;
      height: 20px;
      background-color: #fa1e32;
      color: #fff;
      font-size: 11px;
      border-radius: 10px;
      text-align: center;
      line-height: 20px;
      margin-left: 10px;
    }
  }
  .gotop {
    width: 35px;
    height: 35px;
    position: fixed;
    right: 15px;
    top: 630px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
